<?php
	$css_list[0]['url'] = './tpl/css/album.css';
    $js_list[0] = './tpl/js/jquery.js';
	$js_list[0] = './tpl/js/album.js';
?>

<!--{template inc/header}-->
<div id="body" class="fm1220"> 

<script>

 $(function () {

	scrollimg();

 });

 function scrollimg() {

            var img_count = $(".screenimg img").length;

            var ul_w = 210 * img_count + img_count * 10;

            $(".screenimg ul").css("width", ul_w);

            if (img_count > 3) {

                $(".screenimg li").eq(0).addClass("scroll_on");

            }

            $(".icog_next").bind("click", function () {

                var curr = $(".screenimg .scroll_on").index();

                if (curr < 0)

                    return;

                if ((img_count - curr) > 3) {

                    $(".screenimg .scroll_on").removeClass("scroll_on");

                    $(".screenimg li").eq(curr + 1).addClass("scroll_on");

                    $(".screenimg ul").animate({ left: -(210 * (curr + 1) + 10 * (curr + 1)) }, 300);

                    if (img_count - curr - 1 == 3) {

                        $(".icog_next").removeClass("icog_next_c");

                    }

                }

                $(".icog_prev").addClass("icog_prev_c");

            });

            $(".icog_prev").bind("click", function () {

                var curr = $(".screenimg .scroll_on").index();

                if (curr < 0)

                    return;

                if (curr > 0) {

                    $(".screenimg .scroll_on").removeClass("scroll_on");

                    $(".screenimg li").eq(curr - 1).addClass("scroll_on");

                    $(".screenimg ul").animate({ left: -(210 * (curr - 1) + 10 * (curr - 1)) }, 300);

                    if (curr == 1) {

                        $(".icog_prev").removeClass("icog_prev_c");

                    }

                    $(".icog_next").addClass("icog_next_c");

                }

            });



            if (img_count > 3) {

                $(".icog_prev").hover(function () {

                    if ($(".scroll_on").index() != 0) {

                        $(this).addClass("icog_prev_c");

                    }

                }, function () {

                    //$(this).removeClass("icog_prev_c");

                });

                $(".icog_next").hover(function () {

                    if ($(".scroll_on").index() !== img_count - 3) {

                        $(this).addClass("icog_next_c");

                    }

                }, function () {

                    //$(this).removeClass("icog_next_c");

                });

                if ($(".scroll_on").index() != img_count - 3) {

                    $(".icog_next").addClass("icog_next_c");

                }

                if ($(".scroll_on").index() != 0) {

                    $(".icog_prev").addClass("icog_prev_c");

                }

            }

        }


</script>
	<div class="youji2-line1">
		<div style="float:left; font-size:14px;">选择专辑：摩天轮</div>
    </div>
    <div class="youji2-imglist">
    	<div class="arrow-left icog_prev"><img src="./tpl/images/left-arrow.png" /></div>
        <div class="arrow-right icog_next"><img src="./tpl/images/right-arrow.png" /></div>
        <div class="screenimg">
        <ul>
        	<li>
            	<img src="./tpl/images/myyouji-img4.jpg" width="198" height="198" />
                <div class="cancel-btn"><img src="/tpl/huaban/images/cancel-btn.png"></div>
            </li>
            <li>
            	<img src="./tpl/images/myyouji-img4.jpg" width="198" height="198" />
                <div class="cancel-btn"><img src="/tpl/huaban/images/cancel-btn.png"></div>
            </li>
            <li>
            	<img src="./tpl/images/myyouji-img4.jpg" width="198" height="198" />
                <div class="cancel-btn"><img src="/tpl/huaban/images/cancel-btn.png"></div>
            </li>
            <li>
            	<img src="./tpl/images/myyouji-img4.jpg" width="198" height="198" />
                <div class="cancel-btn"><img src="/tpl/huaban/images/cancel-btn.png"></div>
            </li>
            <li>
            	<img src="./tpl/images/myyouji-img4.jpg" width="198" height="198" />
                <div class="cancel-btn"><img src="/tpl/huaban/images/cancel-btn.png"></div>
            </li>
            <li>
            	<img src="./tpl/images/myyouji-img4.jpg" width="198" height="198" />
                <div class="cancel-btn"><img src="/tpl/huaban/images/cancel-btn.png"></div>
            </li>
        </ul>
       </div>
    </div>
  <link type="text/css" href="/tpl/huaban/css/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
  <link type="text/css" href="/tpl/huaban/css/jquery-ui-timepicker-addon.css" rel="stylesheet" />
  <script type="text/javascript" src="/tpl/huaban/js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="/tpl/huaban/js/jquery-ui-1.8.17.custom.min.js"></script>
	<script type="text/javascript" src="/tpl/huaban/js/jquery-ui-timepicker-addon.js"></script>
    <script type="text/javascript" src="/tpl/huaban/js/jquery-ui-timepicker-zh-CN.js"></script>
	<script type="text/javascript" src="/tpl/huaban/js/handlers.js"></script>
	<script type="text/javascript" src="/tpl/huaban/js/swfupload.js"></script>
    <script type="text/javascript">
	var swfu;
		window.onload = function () {
			swfu = new SWFUpload({
				// Backend Settings
				upload_url: "upload.php",
				post_params: {"PHPSESSID": "<?php echo session_id(); ?>"},

				// File Upload Settings
				file_size_limit : "2 MB",	// 2MB
				file_types : "*.jpg",
				file_types_description : "JPG Images",
				file_upload_limit : "0",

				// Event Handler Settings - these functions as defined in Handlers.js
				//  The handlers are not part of SWFUpload but are part of my website and control how
				//  my website reacts to the SWFUpload events.
				file_queue_error_handler : fileQueueError,
				file_dialog_complete_handler : fileDialogComplete,
				upload_progress_handler : uploadProgress,
				upload_error_handler : uploadError,
				upload_success_handler : uploadSuccess,
				upload_complete_handler : uploadComplete,

				// Button Settings
				button_image_url : "images/SmallSpyGlassWithTransperancy_17x18.png",
				button_placeholder_id : "spanButtonPlaceholder",
				button_width: 180,
				button_height: 18,
				button_text : '<span class="button">Select Images <span class="buttonSmall">(2 MB Max)</span></span>',
				button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12pt; } .buttonSmall { font-size: 10pt; }',
				button_text_top_padding: 0,
				button_text_left_padding: 18,
				button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
				button_cursor: SWFUpload.CURSOR.HAND,
				
				// Flash Settings
				flash_url : "../swfupload/swfupload.swf",

				custom_settings : {
					upload_target : "divFileProgressContainer"
				},
				
				// Debug Settings
				debug: false
			});
		};
	
    $(function () {
        $(".ui_timepicker").datetimepicker({
            showSecond: true,
            timeFormat: 'hh:mm:ss',
            stepHour: 1,
            stepMinute: 1,
        })
    })
    </script>
    <div class="youji2-line2">
        <div class="youji2-date">
        	<form>
            <div style="float:left; overflow:hidden; margin-right:10px;">
                <div class="date-textarea">
                    <textarea>添加照片描述</textarea>
                </div>
            </div>
            <div style="float:left; overflow:hidden; margin-right:10px;">
                <div class="date-none"></div>
                <div class="date-picker"><input type="text"  name="datetime" class="ui_timepicker" value=""/></div>
                <div class="date-city">
                    <input type="text" value="输入城市或地址"/>
                </div>
                <a href="#" class="save-next">保存并编辑下一张</a>
            </div>
            <div style="float:left; overflow:hidden;">
            	<div class="select-wather">
                        天气
                        <select>
                            <option>晴</option>
                            <option>阴</option>
                        </select>
                </div>
            </div>
            </form>
        </div>
    </div>
    <a href="#" class="next-btn">完成</a>
    <!--{if $pager['page_count'] > 1}-->
	<div class="pagination"> 
		<!--{subtemplate inc/pages}--> 
	</div>
	<!--{/if}-->
</div>
<script type="text/javascript">
FANWE.NO_COUNTER = true;
var colHeight = 0;
var colIndex = 0;
var rowHtml = '<div class="album_list_t empty_row"><div class="hd"></div><div class="bd"></div><div class="ws_ft"></div></div>';
jQuery(function(){
	$(".share_col").each(function(i){
		$(this).append(rowHtml);
	});
	
	$(window).scroll(function(){
		$(".share_col").each(function(i){
			$('.empty_row .bd',this).height(0);
			if($(this).height() > colHeight)
			{
				colIndex = i;
				colHeight = $(this).height();
			}
		});
		
		$(".share_col").each(function(i){
			if(i != colIndex)
			{
				$('.empty_row .bd',this).height(colHeight - $(this).height());
			}
		});
	});
});
</script>
<!--{template inc/footer}-->
